@import '@/styles/base.less';

.header {
  background-color: #5b8ff9;
}

.footer a {
  color: #5b8ff9;

  &:hover {
    color: rgba(91, 143, 249, 0.85);
  }
}

.x-canvas {
  display: flex;
  flex-wrap: wrap;
  min-height: 90vh;
  width: 100%;
  overflow: hidden;

  :global {
    // 自定义 plot-container 样式
    .x-plot {
      display: flex;
      flex-direction: column;

      @header-height: 42px;
      // 带头
      .header + .plot-container {
        height: calc(100% - @header-height) !important;
      }

      .plot-container {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: flex-start;

        &-left {
          flex: 1;
          width: 0px;
          height: 100%;
        }
        &-right {
          margin-left: 16px;
        }

        // 特殊处理下图表解释
        .explaination {
          margin-top: -@header-height;
        }
      }
    }

    div[data-type='statistic'] {
      .plot-container {
        padding: 0 24px;
      }
    }
  }
}

// 屏幕适配下
@media (max-width: 500px) {
  :global {
    .x-plot {
      .plot-container {
        flex-direction: column;

        &-left {
          width: 100% !important;
          height: 0 !important;
        }

        &-right {
          margin-top: 16px;
          margin-left: unset !important;
        }
      }
    }

    .g2-html-annotation,
    .g2-html-annotation :not(.ring-annotation) * {
      font-size: 1rem !important;
    }

    .g2-html-annotation.custom-rank-annotation,
    .g2-html-annotation.custom-rank-annotation *,
    .g2-html-annotation .custom-tooltip,
    .g2-html-annotation .custom-tooltip * {
      font-size: 0.8rem !important;
    }
  }
}

@media (max-width: 375px) {
  :global {
    .g2-html-annotation,
    .g2-html-annotation :not(.ring-annotation) * {
      font-size: 0.8rem !important;
    }
  }
}
